@import '~stylePath/_var.scss';
@import '~stylePath/_utils.scss';

// pc打开的提示页面
.results-page{
	position: relative;
    width: 100%;
    height: 100%;
	// background-image: url('~imgPath/results-test.png');
	background-repeat: repeat;
	background-size: 100% auto;
	// opacity: 0.5;

    .back-header{
    	width: 100%;
    	height: 6.52rem;
    };
	.back-title{
	    .list-title{
	    	position: relative;
			display: flex;
			flex-direction: row;
			justify-content: center;
			width: 100%;
			height: 4.45rem;
			margin: 0.61rem 0 0 0;
			background-image: url('~imgPath/list_back_01.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.list-title-back{
				position: absolute;
				top: -0.61rem;
				left: 0;
				width: 100%;
				height: 5.06rem;
			};
			.title-img{
				position: absolute;
				top: -0.61rem;
				left: 0;
				width: 100%;
				height: 5.06rem;
			};
			.top-three1{
				position: relative;
				z-index: 2;
				width: 2.14rem;
				height: 100%;
				background-image: url('~imgPath/second-head.png');
				background-size: 1.75rem 1.81rem;
				background-repeat: no-repeat;
				background-position: 0.25rem 0.95rem;

				.head-img{
					display: block;
					width: 1.22rem;
					height: 1.22rem;
					margin: 1.3rem 0 0 0.51rem;
					border-radius: 50%;
				};
				.name{
					width: 1.66rem;
					height: 0.28rem;
					margin: 0.42rem 0 0 0.27rem;
					@include font(0.24rem, 0.24rem, #ff5f2c);
					text-align: center;
					@include text-overflow();
				};
				.combat-num{
					width: 1.66rem;
					height: 0.24rem;
					margin: 0.08rem 0 0 0.27rem;
					@include font(0.24rem, 0.24rem, #ff8e5a);
					text-align: center;
					@include text-overflow();
				};
				.combat-title{
					width: 1.66rem;
					height: 0.24rem;
					margin: 0.02rem 0 0 0.22rem;
					@include font(0.2rem, 0.2rem, #ff8e5a);
					text-align: center;					
				};
				.watch{
					display: block;
					width: 1.06rem;
    				height: 0.35rem;
    				margin: 0.12rem 0 0 0.5rem;
				};
			};
			.top-three2{
				position: relative;
				z-index: 2;
				width: 2.14rem;
				height: 100%;
				background-image: url('~imgPath/first-head.png');
				background-size: 1.89rem 2.13rem;
				background-repeat: no-repeat;
				background-position: 0.14rem 0.64rem;

				.head-img{
					display: block;
    				width: 1.40rem;
    				height: 1.40rem;
    				margin: 1.08rem 0 0 0.37rem;
					border-radius: 50%;
				};
				.name{
					width: 1.66rem;
					height: 0.28rem;
					margin: 0.48rem 0 0 0.12rem;
					@include font(0.24rem, 0.24rem, #ff5f2c);
					text-align: center;
					@include text-overflow();
				};
				.combat-num{
					width: 1.66rem;
					height: 0.24rem;
					margin: 0.08rem 0 0 0.26rem;
					@include font(0.24rem, 0.24rem, #ff8e5a);
					text-align: center;
					@include text-overflow();
				};
				.combat-title{
					width: 1.66rem;
					height: 0.24rem;
					margin: 0.02rem 0 0 0.24rem;
					@include font(0.2rem, 0.2rem, #ff8e5a);
					text-align: center;					
				};
				.watch{
					display: block;
					width: 1.06rem;
    				height: 0.35rem;
    				margin: 0.12rem 0 0 0.5rem;
				};
			};
			.top-three3{
				position: relative;
				z-index: 2;
				width: 2.14rem;
				height: 100%;
				background-image: url('~imgPath/three-head.png');
				background-size: 1.76rem 1.78rem;
				background-repeat: no-repeat;
				background-position: 0.1rem 0.98rem;

				.head-img{
					display: block;
					width: 1.22rem;
					height: 1.22rem;
					margin: 1.28rem 0 0 0.38rem;
					border-radius: 50%;
				};
				.name{
					width: 1.66rem;
					height: 0.28rem;
					margin: 0.46rem 0 0 0.08rem;
					@include font(0.24rem, 0.24rem, #ff5f2c);
					text-align: center;
					@include text-overflow();
				};
				.combat-num{
					width: 1.66rem;
					height: 0.24rem;
					margin: 0.08rem 0 0 0.2rem;
					@include font(0.24rem, 0.24rem, #ff8e5a);
					text-align: center;
					@include text-overflow();
				};
				.combat-title{
					width: 1.66rem;
					height: 0.24rem;
					margin: 0.02rem 0 0 0.18rem;
					@include font(0.2rem, 0.2rem, #ff8e5a);
					text-align: center;					
				};
				.watch{
					display: block;
					width: 1.06rem;
    				height: 0.35rem;
    				margin: 0.12rem 0 0 0.4rem;
				};
			};
	    };
	};
	.back-repeat{
		width: 100%;
		background-image: url('~imgPath/back_img_02.jpg');
		background-repeat: repeat;
		background-size: 100% auto;

	    .list-content{
	    	width: 100%;
	    	padding: 0.12rem 0 0;
			background-image: url('~imgPath/list_back_02.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.list-item{
				display: flex;
				flex-direction: row;
				width: 6.18rem;
				height: 1.47rem;
				margin: 0 auto 0.19rem;
				background-image: url('~imgPath/results-list-item.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;

				.index{
					width: 0.42rem;
					height: 0.42rem;
					margin: 0.52rem 0.18rem 0 0.39rem;
					background-image: url('~imgPath/list-icon.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					border-radius: 50%;
					@include font(0.2rem, 0.42rem, #ffffff);
					text-align: center;
					overflow: hidden;
				};
				.head-img{
					width: 1.05rem;
					height: 1.05rem;
					margin: 0.16rem 0 0 0;
					border: 0.03rem solid #ffea9c;
					border-radius: 50%;
					background-image: url('~imgPath/icon-default.png');
				};
				.intro{
					box-sizing: border-box;
					width: 2.72rem;
					height: 100%;
					padding: 0.46rem 0 0 0.23rem;
					@include font(0.22rem, 0.22rem, #ff6439);

					.name{
						height: 0.3rem;
						margin: 0 0 0.06rem 0;
						letter-spacing: 0.01rem;
						@include text-overflow();
					};
					.combat-num{
						height: 0.23rem;
						padding: 0.04rem 0 0 0.36rem;
						background-image: url('~imgPath/combat-icon.png');
						background-size: auto 100%;
						background-repeat: no-repeat;
						background-position: left top;
						@include text-overflow();
					};
				};
				.watch{
					width: 1.06rem;
					height: 0.35rem;
					margin: 0.55rem 0 0 0;
				};
			};
			.list-item:nth-last-of-type(1){
				margin: 0 auto;
			};
	    };	
	};
	.back-bottom{
		width: 100%;
		padding: 0 0 0.8rem 0;
		background-image: url('~imgPath/back_img_03.jpg');
		background-repeat: repeat;
		background-size: 100% auto;

	    .list-bottom{
			width: 100%;
			height: 0.71rem;
			background-image: url('~imgPath/list_back_03.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;	
	    };
	};
    .page-toast{
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 9;
        transform: translate(-50%, -50%);
        padding: 0.2rem 0.5rem;
        background-color: rgba(0,0,0,0.5);
        border-radius: 0.1rem;
        @include font(0.3rem, 0.3rem, #ffffff);
    };
};
